<template>
  <div class="feedBack-contaienr">
    <div class="feedBack-contaienr-feed">
      <div class="feedBack-contaienr-feed-title">意见反馈</div>
      <nut-textarea
        v-model="state.text"
        limit-show
        max-length="140"
        placeholder="请填写你要反馈的信息~"
      />
    </div>
    <div class="feedBack-contaienr-phone">
      <div class="feedBack-contaienr-feed-title">联系方式</div>
      <nut-input
        v-model="state.phone"
        placeholder="请填写你的手机号,以便我们与你联系(可选)~"
        type="digit"
        max-length="11"
      />
      <!-- <input type="number" v-model="state.phone" pattern="\d*"> -->
    </div>
    <Footer @clickBack="getSonEmit" :text="text" :phone="phone"></Footer>
  </div>
</template>
<script setup>
// import { Input, Textarea } from "@nutui/icons-vue-taro";
import { reactive } from "vue";
import Footer from "./footer.vue";
const state = reactive({
  text: "",
  phone: "",
});
const getSonEmit = () => {
  state.text = "";
  state.phone = "";
};
</script>

<style lang="scss">
.feedBack-contaienr {
  padding: 25px;
  box-sizing: border-box;
  .feedBack-contaienr-feed {
    display: flex;
    flex-direction: column;
    justify-content: center;
    .nut-textarea {
      border-radius: 20px;
      margin-top: 15px;
      .nut-textarea__textarea {
        color: #858a99 !important;
        color: 24px;
      }
    }
    .feedBack-contaienr-feed-title {
      color: #15181d;
      font-size: 30px;
      font-weight: 700;
    }
  }
  .feedBack-contaienr-phone {
    margin-top: 25px;
    .feedBack-contaienr-feed-title {
      color: #15181d;
      font-size: 30px;
      font-weight: 700;
    }
    .nut-input {
      margin-top: 15px;
      .nut-input-box {
        color: #858a99 !important;
        color: 24px;
      }
    }
  }
}
</style>
